/*
 * Canvas Game Library
 * Module: UI
 * 
 * Copyright Chainsawrus Wreaks 2011
 * All rights reserved.
 */

/**
 * @fileOverview The UI class will give CGL basic UI capabilities such as buttons and later maybe basic input
 * modules (this will not be priotized though as HTML5 can deliver most of this outside the Canvas platform).
 */

/**
 * AJAX module namespace
 * @namespace CGL.ui
 */
CGL.ui = {
		
	Button : function(srcx, srcy, srcwidth, srcheight, txt) {
		var button = {
			images : new Array(2),
			icon : null,
			icon_x : 0,
			icon_y : 0,
			text : txt || "",
			x : srcx,
			y : srcy,
			width : srcwidth,
			height : srcheight,
			active : false,
		
			load : function(imgs) {
				button.images[0] = new CGL.image.Image();
				button.images[0].load(imgs[0]);
				button.images[1] = new CGL.image.Image();
				button.images[1].load(imgs[1]);
			},
			
			loadIcon : function(src, x, y) {
				button.icon = new CGL.image.Image();
				button.icon.load(src);
				button.icon_x = x;
				button.icon_y = y;
			},
			
			setText : function(txt) {
				button.text = txt;
			},
			
			setPos : function(dx, dy) {
				button.x = dx;
				button.y = dy;
			},
			
			update : function(callback, msg) {
				if(CGL.event.MOUSEX > button.x && CGL.event.MOUSEX < button.x + button.width && CGL.event.MOUSEY > button.y && CGL.event.MOUSEY < button.y + button.height)
				{
					button.active = true;
				}
				else
				{
					button.active = false;
				}
				if(button.active && CGL.event.MB_DOWN)
				{
					CGL.event.MB_DOWN = false;
					if(msg != undefined)
					{
						callback(msg);
					}
					else
					{
						callback();
					}
				}
			},
			
			render : function(ctx) {
				if(button.images[0] != undefined)
				{
					if(!button.active)
					{
						button.images[0].render(ctx, button.x, button.y);
					}
					else
					{
						button.images[1].render(ctx, button.x, button.y);
					}
				}
				else
				{
					if(button.active)
					{
						ctx.save();
						ctx.setGlobalAlpha = 0.5;
						ctx.fillStyle = "black";
						ctx.fillRect(button.x, button.y, button.width, button.height);
						ctx.restore();
					}
				}
				if(button.text != "")
				{
					ctx.textAlign = "center";
					ctx.fillText(button.text, (button.x + button.width/2), (button.y + button.height/2 + 4));
				}
				if(button.icon != null)
				{
					button.icon.render(ctx, button.x + button.icon_x, button.y + button.icon_y);
				}
			}
		};
		return button;
	},

	CheckBox : function(dx, dy, srcwidth, srcheight, txt) {
		checkbox = {
			images : new Array(2),
			state : false,
			text : txt || "",
			x : dx || 0,
			y : dy || 0,
			width : srcwidth || 0,
			height : srcheight || 0,
			
			load : function(imgs) {
				checkbox.images[0] = new CGL.image.Image();
				checkbox.images[0].load(imgs[0]);
				checkbox.images[1] = new CGL.image.Image();
				checkbox.images[1].load(imgs[1]);
			},
			
			changeState : function() {
				if(checkbox.state)
				{
					checkbox.state = false;
				}
				else
				{
					checkbox.state = true;
				}
			},
			
			update : function(callback) {
				if(CGL.event.MOUSEX > checkbox.x && CGL.event.MOUSEX < checkbox.x + checkbox.width 
				&& CGL.event.MOUSEY > checkbox.y && CGL.event.MOUSEY < checkbox.y + checkbox.height 
				&& CGL.event.MB_DOWN)
				{
					CGL.event.MB_DOWN = false;
					checkbox.changeState();
					callback(checkbox.state);
				}
			},
			
			render : function(ctx) {
				if(!checkbox.state)
				{
					checkbox.images[0].render(ctx, checkbox.x, checkbox.y);
				}
				else
				{
					checkbox.images[1].render(ctx, checkbox.x, checkbox.y);
				}
				if(checkbox.text != "")
				{
					ctx.fillText(checkbox.text, checkbox.x + checkbox.width + 6, checkbox.y + checkbox.height - 6);
				}
			}
		};
		return checkbox;
	},
	
	Radio : function() {
		var radio = {
			buttons : new Array(),
			
			init : function() {
				radio.buttons[0].setActive(true);
			},
			
			addButton : function(radioButton) {
				radio.buttons.push(radioButton);
			},
			
			activate : function(choice) {
				for(var i = 0; i < radio.buttons.length; i++)
				{
					radio.buttons[i].setActive(false);
				}
				radio.buttons[choice].setActive(true);
			},
			
			update : function(callback) {
				var activate;
				for(var i = 0; i < radio.buttons.length; i++)
				{
					activate = radio.buttons[i].update();
					if(activate)
					{
						radio.activate(i);
						callback(i);
					}
				}
			},
			
			render : function(ctx) {
				for(var i = 0; i < radio.buttons.length; i++)
				{
					radio.buttons[i].render(ctx);
				}
			}
		};
		return radio;
	},
	
	RadioButton : function(posx, posy, srcwidth, srcheight) {
		var rb = {
			images : new Array(),
			state : 0,
			active : false,
			x : posx || 0,
			y : posy || 0,
			width : srcwidth || 0,
			height : srcheight || 0,
			
			load : function(imgs) {
				var tempImg;
				for(var i = 0; i < imgs.length; i++)
				{
					tempImg = new CGL.image.Image();
					tempImg.load(imgs[i]);
					rb.images.push(tempImg);
				}
			},
			
			setActive : function(active) {
				rb.active = active;
				if(rb.active)
				{
					rb.state = 2;
				}
			},
		
			update : function() {
				if(!rb.active)
				{
					if(CGL.event.MOUSEX > rb.x && CGL.event.MOUSEX < rb.x + rb.width 
							&& CGL.event.MOUSEY > rb.y && CGL.event.MOUSEY < rb.y + rb.height)
					{
						rb.state = 1;
						if(CGL.event.MB_DOWN)
						{
							CGL.event.MB_DOWN = false;
							return true;
						}
						else
						{
							return false;
						}
					}
					else
					{
						rb.state = 0;
					}
				}
			},
			
			render : function(ctx) {
				rb.images[rb.state].render(ctx, rb.x, rb.y);
			}
		};
		return rb;
	}
};